<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryForm" label-width="80px" :inline="true" class="hear-ss">
      <el-form-item label="宿舍名称">
        <el-input v-model="queryParams.dormName" placeholder="请输入宿舍名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="宿舍楼栋">
        <el-select v-model="queryParams.buidId" clearable placeholder="请选择">
          <el-option
            v-for="item in buildList"
            :label="item.levelName"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" icon="el-icon-search" size="small">搜索</el-button>
        <el-button @click="reset" icon="el-icon-refresh" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 添加按钮 -->
    <div style="margin: 20px 0px 8px 0px"></div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <download-excel
          class="export-excel-wrapper"
          :data="excelList"
          :fields="json_fields"
          :header="excelTitle"
          name="宿舍卫生统计.xls"
        >
          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
          <el-button type="warning" icon="el-icon-download" size="mini" >宿舍卫生信息统计导出</el-button>
        </download-excel>
      </el-col>
    </el-row>
    <!-- 表单 -->
    <el-table v-loading="loading" :data="form" @selection-change="handleSelectionChange">
<!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column prop="buildName" label="楼栋名称" align="center"></el-table-column>
      <el-table-column prop="dormName" label="宿舍名称" align="center"></el-table-column>
      <el-table-column prop="inspectNum" label="检查次数" align="center"></el-table-column>
      <el-table-column prop="excellentNum" label="优秀次数" align="center"></el-table-column>
      <el-table-column prop="goodNum" label="良好次数" align="center"></el-table-column>
      <el-table-column prop="unqualifiedNum" label="差次数" align="center"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <div>
      <el-pagination
        class="page"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 40, 60]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

  </div>
</template>

  <script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getToken } from "@/utils/auth";
import {
  getList,
  buildList
} from "@/api/workmgr/dormitoryHygieneStatistics";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      upload: {
        url: process.env.VUE_APP_BASE_API + "/test/uploadImage",
        showUrl: process.env.VUE_APP_BASE_API + "/school/file/"
      },
      dialogApprovalVisible: false,
      multiple: true,
      isView: false,
      //审批记录
      activities: [],
      // 遮罩层
      loading: false,
      editLoading: false,
      //弹框
      dialogVisible: false,
      dialogVisible1: false,
      // 分页总页数
      total: 0,
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 状态数据字典
      statusOptions: [],
      gradeOptions: [],
      //添加违规参数
      form1: {
        dormId: null,
        buidId: null,
        hyshFlag: null,
        hyshDate: null,
        hyshDesc: null
      },
      form2: {},
      data: {
        applyDesc: "",
        applyID: "",
        applyTitle: "",
        approvedBy: "",
        attachment: "",
        businessKey: "",
        currNode: "",
        flag: 0,
        lastNode: "",
        processInstanceId: "",
        taskId: "",
        variables: {}
      },
      //多选绑定数组
      violative: [],
      //表单绑定对象
      form: [],
      //表单验证
      rules: {
        buidId: [{ required: true, message: "请选择楼栋", trigger: "blur" }],
        dormId: [{ required: true, message: "请选择宿舍", trigger: "blur" }],
        hydoDate: [
          { required: true, message: "请输入登记时间", trigger: "blur" }
        ],
        hydoFlag: [
          { required: true, message: "请选择卫生情况", trigger: "blur" }
        ]
      },
      //文件上传数组
      fileList: [],
      hygieneOptions: [],
      rowList: [],
      buildList: [],
      dormitoryList: [],
      excelTitle: "宿舍卫生信息统计表",
      excelList: [],
      exportDataList:[],
      json_fields:{
          "宿舍名称":"dormName",
          "楼栋名称":"buildName",
          "检查次数":"inspectNum",
          "优秀次数":"excellentNum",
          "良好次数":"goodNum",
          "差次数":"unqualifiedNum",
      }
    };
  },
  // 监听属性 类似于data概念
  computed: {
    headers() {
      return {
        Authorization: getToken()
      };
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getBuildList() {
      buildList({ locationType: 1, locationPid: 0 }).then(resp => {
        this.buildList = resp.data;
      });
    },

    getDictLabel(list, value) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].dictValue == value) {
          return list[i].dictLabel;
        }
      }
    },
    handleSelectionChange(selection) {
      console.log(selection);
      this.rowList = selection;
      this.multiple = !selection.length;
    },
    //违纪查询
    getList() {
      this.loading = true;
      getList(this.queryParams).then(res => {
        this.form = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    //搜索按钮操作
    search() {
      this.getList();
    },
    //重置按钮操作
    reset() {
      this.fileList = undefined;
      this.queryParams.createByName = null;
      this.queryParams.hyshDate = null;
      this.queryParams.hyshFlag = null;
      this.resetForm("queryForm");
      this.search();
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onSuccess(response, file, fileList) {
      this.getFileList(fileList);
      console.log("onSuccess", fileList);
    },
    getFileList(allFileList) {
      if (!allFileList) {
        return;
      }
      for (let i = 0; i < allFileList.length; i++) {
        if (allFileList[i].response) {
          this.fileList.push({
            name: allFileList[i].name,
            url: this.upload.showUrl + allFileList[i].response.result,
            dataUrl: allFileList[i].response.result
          });
        }
      }
    },
    handleEdit(row) {
      this.dialogVisible = true;

      this.form1 = JSON.parse(JSON.stringify(row));
      if (this.form1.hydoImage1) {
        this.fileList = [];
        const files = this.form1.hydoImage1.split(",");
        for (let i = 0; i < files.length; i++) {
          this.fileList.push({
            name: files[i],
            url: this.upload.showUrl + files[i],
            dataUrl: files[i]
          });
        }
      }
    },
    handledApproval() {
      this.rowList;
      let ids = [];
      let names = [];
      for (let i = 0; i < this.rowList.length; i++) {
        ids[i] = this.rowList[i].id;
        names[i] = this.rowList[i].violativeName;
      }
      this.approvalForm.ids = ids.join(",");
      this.weijiName = names.join(",");
      this.approvalForm.noticeType = "2";
      this.dialogApprovalVisible = true;
    },

    //分页
    handleSizeChange(num) {
      this.queryParams.pageSize = num;
      this.getList();
    },
    handleCurrentChange(num) {
      this.queryParams.pageNum = num;
      this.getList();
    },

    handleClose() {
      this.dialogVisible1 = false;
      this.dialogVisible2 = false;
    },
    //预览图片
    handlePreview1(val) {
      console.log(val, 585);
      if (val) {
        const image = new Image();
        image.src = process.env.VUE_APP_BASE_API + "/school/file/" + val.url;
        const imgWindow = window.open(val);
        imgWindow.document.write(image.outerHTML);
      }
    },
      getExportData() {
          getList({pageNum:1,pageSize:10000}).then(response => {
                  this.excelList = [],
                      this.exportDataList =  JSON.parse(JSON.stringify(response.data.list));
                  for(let i=0;i<this.exportDataList.length;i++){
                      this.excelList[i]=this.exportDataList[i]

                      this.excelList[i].createTime = this.parseTime(this.exportDataList[i].createTime)
                  }
              }
          );
      }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
    this.getBuildList();
    this.getExportData();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
  <style lang='scss' scoped>
.page {
  float: right;
  margin: 10px 0px 0px 150px;
  padding-right: 80px;
}
</style>
